/**
 * 网络无障碍辅助功能
 * 【WCAG】网络内容无障碍指南
 * 【WAI-ARIA】网络无障碍倡议-无障碍互联网应用
 */

import React, { Fragment } from "react";
import './index.css';

// 鼠标和指针事件
class BlurExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false
    }
    this.onBlurHandler = this.onBlurHandler.bind(this);
    this.onFocusHandler = this.onFocusHandler.bind(this);
    this.onClickHandler = this.onClickHandler.bind(this);
  }
  onBlurHandler() {
    this.timeOutId = setTimeout(() => {
      this.setState({
        isOpen: false
      })
    })
  }
  onFocusHandler() {
    clearTimeout(this.timeOutId);
  }
  onClickHandler(e) {
    this.setState(currentState => ({
      isOpen: !currentState.isOpen
    }))
  }
  render() {
    return (
      <div onBlur={this.onBlurHandler} onFocus={this.onFocusHandler}>
        <button className="btn" onClick={this.onClickHandler}>Select an option</button>
        {
          this.state.isOpen && (
            <ul className="ulBox">
              <li>Option 1</li>
              <li>Option 2</li>
              <li>Option 3</li>
            </ul>
          )
        }
      </div>
    )
  }
}
/* 
  【语义化HTML】
  Fragment：可以给子列表分组，且无需向 DOM 添加额外节点，可以用短语法 <></> 声明，但不支持key或属性
*/
class ReactFragment extends React.Component {
  render() {
    return (
      <Fragment>
        <dl>
          <dt>语义化HTML</dt>
          <dd>语义化的 HTML 是无障碍辅助功能网络应用的基础。 </dd>
        </dl>
        <Fragment>
          <dt>语义化HTML</dt>
          <dd>语义化的 HTML 是无障碍辅助功能网络应用的基础。 </dd>
        </Fragment>
      </Fragment>
    )
  }
}
// 无障碍表单
class CusForm extends React.Component {
  render() {
    return (
      <Fragment>
        <label htmlFor='namedInput'>名字：</label>
        <input id="namedInput" type="text" name="name"/>
      </Fragment>
    )
  }
}
// 【设置焦点】使用 ref
class SetFocus extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();
  }
  focus() {
    // 在需要的时候设置焦点
    this.textInput.current.focus();
  }
  render() {
    return (
      <Fragment>
        <input type='text' ref={this.textInput} />
      </Fragment>
    )
  }
}

class Accessibility extends React.Component {
  render() {
    return (
      <div>
        <fieldset>
          <legend>语义化HTML</legend>
          <ReactFragment />
        </fieldset>
        <fieldset>
          <legend>无障碍表单</legend>
          <CusForm />
        </fieldset>
        <fieldset>
          <legend>设置焦点</legend>
          <SetFocus />
        </fieldset>
        <fieldset>
          <legend>鼠标和指针事件</legend>
          <BlurExample />
        </fieldset>
      </div>
    );
  }
}
export default Accessibility;